<template>
  <div class="main">
    <div class='main_title'>
      <div class="title_aa">
        <div class="title_my">
          <!-- <p class="title_my_jf">我的普通积分</p> -->
          <div class="title_my_jfs">{{ userInfo.memberPoints }}</div>
          <div class="title_mys">
            <span class="mys_jl" @click="toRecord()">积分记录</span>
            <span class="mys_dd" @click="toOrder()">积分订单</span>
          </div>
        </div>
        <!-- <div class="title_points" @click="toPointsMall()">
          <p class="jifen">精品积分</p>
          <div class="bb">{{ userInfo.highQualityPoints }}</div>
          <div class="aa">
            精品积分商城
            <i>></i>
          </div>
        </div> -->
        <!-- <div class="title_points">
          <p class="jf">此功能暂时关闭...</p>
        </div> -->
      </div>
      <div class="title_bb">
        <div class="title_bbs_a" @click="goMySign()">
          <div class="bbs_a_left">
            <p>签到领积分</p>
            <div class="ji">每月最高可得8500积分</div>
          </div>
          <img class="Img" src="../../assets/image/rili.png" alt />
        </div>
        <div class="title_bbs_a"  @click="goCoin()">
          <div class="bbs_a_left">
            <p>积分兑金币</p>
            <div class="ji">金币可抵扣普药货款</div>
          </div>
          <img class="Img" src="../../assets/image/monly.png" alt />
        </div>
      </div>
      <form class="search" action="javascript:return true" @submit.prevent="formSubmit">
        <input type="text" v-model="search" @keyup.enter="getList(1)" placeholder="请输入关键词进行搜索" />
        <button type="submit" @click="getList(1)">搜索</button>
      </form>
    </div>

    <div class="main_center">
      <div class="good">
        <!-- 搜索商品 -->
        <div class="goods">
          <!-- // 专区数据 -->
          <van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="getList">
            <div class="life">
              <div class="life_item" v-for="(v, i) in birdGoods" :key="i" @click="toDetails1(v)">
                <img class="imgs" :src="v.img" alt />
                <div class="item_main">
                  <div class="name">{{ v.goodsName }}</div>
                  <div class="car">
                    <div class="mol">
                      <img src="../../assets/image/moliy.png" alt />
                      {{ v.point }}
                    </div>
                    <img class="seeImg" src="../../assets/image/goo.png" alt />
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import exChange from '../../components/exChange'
import url from '../../axios/apiUrl'
import { postRequest } from '../../api/index'
import { getRequest } from '../../api/indexGet'
export default {
  data() {
    return {
      userInfo: {},
      loading: false,
      activeName: 'a',
      allGoods: [], //所有商品
      num: 1,
      curTitle: 3,
      birdGoods: [], //神鸟商品
      showcom: true,
      show: false,
      click_cur: {},
      click_add: {},
      search: '',
      goodsSearch: [], // 商品搜索
      searchData: [],
      pageSize: '20', //每页请求条数
      pageNum: 1,
      isLoading: false,
      finished: false,
      page: '',
    }
  },
  components: {
    exChange,
  },
  created() {
    // 获取用户个人信息
    getRequest(url.pointsInfo).then((res) => {
      if (res.data.code == '000000') {
        this.userInfo = res.data.content
        if (this.userInfo.signNumber >= 0 && this.userInfo.signNumber < 7) {
          this.getPoints = 50
        } else if (
          this.userInfo.signNumber >= 7 &&
          this.userInfo.signNumber < 14
        ) {
          this.getPoints = 150
        } else if (
          this.userInfo.signNumber >= 14 &&
          this.userInfo.signNumber < 21
        ) {
          this.getPoints = 300
        } else if (
          this.userInfo.signNumber >= 21 &&
          this.userInfo.signNumber <= 31
        ) {
          this.getPoints = 500
        }
      }
    })
  },
  mounted() {},
  methods: {
    getList(page) {
      if (page) this.pageNum = page
      postRequest(url.searchGoods, {
        pageNum: this.pageNum,
        keyword: this.search,
      })
        .then((res) => {
          if (res.data.code == '000000') {
            if (this.pageNum == 1) {
              this.birdGoods = []
            }
            this.isLoading = false
            this.pageNum++
            this.goodsSearch = res.data.content
            this.birdGoods = this.birdGoods.concat(res.data.content.list)
            this.birdGoods.forEach((obj) => {
              this.$set(obj, 'num', 1)
            })
            if (this.birdGoods.length == res.data.content.page.total) {
              // 数据全部加载完成
              this.finished = true
            } else {
              this.finished = false
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },

    formSubmit() {
      return false
    },
    searchTo() {
      // 手机键盘回车的编码是13
      if (event.keyCode == 13) {
        this.Search()
      }
    },
    // input事件
    onBlur() {
      setTimeout(() => {
        document.body.scrollTop = document.body.scrollHeight
      }, 3000)
    },

    // 点击弹窗
    showPopup(v) {
      this.click_cur = v
      this.show = true
      this.clickData = this.allGoods
    },
    // 点击弹窗兑换
    showChange(v) {
      // this.click_add = v;
      // this.show = true;
      // this.clickData = this.allGoods;
      // sessionStorage.setItem("ponitOrder", JSON.stringify(result));
      // this.$router.push('/birdWriteOrder',query:{id:v.id})
      this.$router.push({
        path: '/birdWriteOrder',
        query: { id: v.goodsId },
      })
    },
    changeDia(bool) {
      this.show = bool
    },
    // 跳转精品积分商城
    toPointsMall() {
      this.$router.push('/boutiquePointsMall')
    },
    // 去详情
    // toDetails(v) {
    //   this.$router.push({ path: "/pointsDetails", query: { id: v.id } });
    // },
    // 综合专区去详情
    toDetails1(v) {
      this.$router.push({
        path: '/birdGoodsDetails',
        query: { id: v.goodsId },
      })
    },
    // 跳转到积分记录
    toRecord() {
      window.location.href =this.pathURL+'nativeApp/IntegralRecord'
    },
    // 跳转积分订单
    toOrder() {
      this.$router.push('/pointsOrder')
    },
    // 跳精品兑金币
    goCoin() {
      window.location.href = this.pathURL+'nativeApp/GoldCoin'
    },
    // 跳转积分商城
    goMySign() {
      this.$router.push('/mySign')
    },
  },
}
</script>
<style lang="less" scoped>
.main {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: auto;
  display: block;
  .main_title {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 9;
  }
  .search {
    text-align: center;
    margin: 0 auto;
    position: relative;
    top: 16px;
    left: 0;
    input {
      width: 94%;
      height: 88px;
      line-height: 88px;
      box-sizing: border-box;
      border: 0.01rem solid #f1f2f6;
      border-radius: 4px;
      padding-left: 10px;
      outline-style: none;
      font-size: 24px;
      font-weight: 500;
      font-family: 'Microsoft soft';
      padding: 0.12rem 0.12rem;
    }
    button {
      width: 2rem;
      height: 0.8rem;
      font-size: 26px;
      color: #3dbb2b;
      font-weight: bold;
      border: none;
      background-color: #ffffff;
      position: absolute;
      top: 0.2rem;
      right: 0.4rem;
      border-left: 0.01rem solid #3dbb2b;
    }
  }
  .goods {
    width: 100vw;
    height: 100vh;
    opacity: 1;
    background: #ffffff;
    overflow: scroll;
    .van_list {
      height: 100%;
    }
  }
  .title_aa {
    align-items: center;
    color: #fff;
    display: flex;
    justify-content: space-between;
    .title_my {
      width: 100%;
      height: 220px;
      background: #fe550d;
      align-items: center;
      box-shadow: 0.1rem 0.1rem 0.4rem 0.6rem #fe550d;
      border-radius: 0.2rem;
      color: #fff;
      align-items: center;
      box-sizing: border-box;
      text-align: center;
      .title_my_jf {
        font-weight: 500;
        font-size: 26px;
        color: #ffffff;
        padding-left: 0.2rem;
      }
      .title_my_jfs {
        font-weight: bold;
        font-size: 40px;
        color: #ffffff;
        margin-top: 80px;
        margin-bottom: 12px;
      }
      .title_mys {
        color: #ffffff;
        .mys_jl {
          border-right: 0.06rem solid#FFF;
          padding-right: 0.2rem;
          color: #ffffff;
        }
        .mys_dd {
          padding-left: 0.2rem;
          color: #ffffff;
        }
      }
    }
    .title_points {
      width: 240px;
      height: 358px;
      background-color: #eeb476;
      border-radius: 20px;
      align-items: center;
      margin-right: 14px;
      color: #fff;
      .jf{
        color: #eee;
        padding-left: 8px;
        margin: 0 auto;
        font-size: 22px;
        font-weight: 700;
        line-height: 92px;
      }
      .jifen {
        color: #ffffff;
        padding-left: 12px;
      }
      .aa {
        color: #ffffff;

        padding-left: 12px;
        i {
          font-weight: bold;
          font-size: 26px;
        }
      }
      .bb {
        font-size: 0.36rem;
        font-weight: bold;
        color: #ffffff;
        // margin-top: 12px;
        padding-left: 12px;
      }
    }
  }
  .title_bb {
    margin-top: 32px;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    display: flex;
    justify-content: space-between;
    text-align: center;
    box-sizing: border-box;
    .title_bbs_a {
      width: 328px;
      height: 140px;
      background: #ffffff;
      border: 1px solid #f1f2f6;
      border-radius: 10px;
      margin-left: 0.2rem;
      margin-right: 0.2rem;
      display: flex;
      justify-content: space-around;
      box-sizing: border-box;
      .bbs_a_left {
        display: block;
        text-align: left;
        padding-left: 0.2rem;
        width: 50%;
        p {
          font-size: 0.3rem;
          font-family: PingFang SC;
          font-weight: bold;
          color: #343434;
        }
        .ji {
          // font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
          margin-top: -16px;
          height: .8rem;
          line-height: 30px;
          overflow: hidden;
        }
      }
      .Img {
        width: 180px;
        height: 140px;
        box-sizing: border-box;
      }
    }
  }

  .main_center {
    margin-top: 6.8rem;
    height: auto;
    .life {
      background: #f1f2f6;
      box-sizing: border-box;
      .life_item {
        height: 252px;
        background: #ffffff;
        border-bottom: 0.2rem solid #f1f2f6;
        // padding: 0.2rem;
        align-items: center;
        display: flex;
        justify-content: space-around;
        box-sizing: border-box;
        .imgs {
          width: 2.6rem;
          height: 2.6rem;
        }
        .item_main {
          width: 5.4rem;
          height: 2.6rem;
          align-items: 0.48rem;
          box-sizing: border-box;
          .name {
            width: 100%;
            height: 70px;
            margin-bottom: 60px;
            font-size: 26px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #222222;
            margin-top: 16px;
            // white-space: nowrap;
            overflow: hidden;
            // text-overflow: clip;
          }

          .moliy {
            font-size: 0.22rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(136, 136, 136, 0.8);
          }

          .car {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            .mol {
              img {
                width: 0.3rem;
                height: 0.3rem;
                // padding-right: 0.2rem;
              }
              font-size: 0.36rem;
              font-family: PingFang SC;
              font-weight: bold;
              color: #1fb808;
            }
            .seeImg {
              width: 0.46rem !important;
              height: 0.46rem !important;
              box-sizing: border-box;
            }
          }
        }
      }
    }
  }
}
</style>
